<template>
	<echelon-solutions>
		<skyline-navigation center title="首页" showBack="0"></skyline-navigation>
		<central-hub>
			<view>
				<view class="card-list">
					<view v-for="(item, index) in menus" :key="index" class="card-item" @click="goToAccountList(item)">
						<view class="icon-box">
							<i :class="[`iconfont ${item.icon}`]"></i>
						</view>
						<view class="content-box">
							<div class="title">{{ item.name }}</div>
							<div class="desc">{{ item.permission }}</div>
						</view>
					</view>
					<button type="warn" @click="logout('/pages/auth/login')">退出登录</button>
				</view> 
			</view>
		</central-hub>
		<!-- <refined-tab-bar v-model="selected" storage="refined-tab-bar" mode="Rudderinset"></refined-tab-bar> -->
	</echelon-solutions>
</template>

<script> 

	export default { 
		methods: {
		 
			goToAccountList({
				url
			}) {
				this.$record.navigateTo({
					url
				})
			},
			updateSelectedRows(selectedRows) {
				this.selectedRows = selectedRows;
			},
			handleEdit(data) {
				console.log("编辑：" + data.name);
			},
			handleDelete(data) {
				console.log("删除：" + data.name);
			},
		},
		onShow() {

		},
		onLoad() {
			this.$listPublic('menu', {
				id: this.$storage.get('login').role_id
			}, (data) => {
				this.menus.push(...data, {
					url: '/pages/detail/list',
					name: '用户管理',
					icon: 'icon-gerenxinxi'
				});
			});
		},
		// 在页面中定义侧滑返回的监听 
		data() {
			return {
				menus: [],
				selected: this.$storage.get('refined-tab-bar') || 0,
				navSelected: this.$storage.get('nav-tab-bar') || 0, 
			}
		},

	}
</script>

<style>
	.card-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.card-item {
		width: calc(50% - 20rpx);
		margin: 10rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.icon-box {
		font-size: 40rpx;
		color: #007aff;
		margin-right: 20rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.desc {
		font-size: 28rpx;
		color: #999999;
	}
</style>